<!DOCTYPE html>
<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <title>添加</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="/static/css/font.css">
    <link rel="stylesheet" href="/static/css/xadmin.css">
    <script type="text/javascript" src="/static/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/static/js/xadmin.js"></script>
    <script type="text/javascript" src="/static/js/jquery-2.1.0.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <!-- 引入 css -->
    <link href="/static/css/wang_editor_style.css" rel="stylesheet">
    <!-- 引入 js -->
    <script src="/static/js/wangEditor.min.js"></script>
    <script src="/static/js/axios.min.js" charset="utf-8"></script>
    <style>
        #img-box img
        {
            width: 50px;
            height: 50px;
        }
        #editor
        {
            width: 500px;
        }
        .w-e-menu:nth-child(1)
        {
            z-index: 10002 !important;
        }
        .w-e-menu:nth-child(1) .w-e-droplist
        {
            margin-top: 18px;
            z-index: 100000000 !important;
        }
        .layui-anim.layui-anim-upbit
        {
            z-index: 10000000;
        }
    </style>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row">
        <form class="layui-form">
            <div class="layui-form-item">
                <label for="L_title" class="layui-form-label">
                    标题
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="L_title" name="title" required="" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label for="L_category_id" class="layui-form-label">
                    分类
                </label>
                <div class="layui-input-inline">
                    <select id="L_category_id" name="category_id" required="" autocomplete="off" class="layui-select">
                        <option th:each="item:${categoryList}" th:value="${item.id}" th:text="${item.title}"></option>
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <label for="L_category_id" class="layui-form-label">
                    类型
                </label>
                <div class="layui-input-inline">
                    <select id="L_type" name="type" required="" autocomplete="off" class="layui-select">
                        <option value="1">文章类</option>
                        <option value="2">链接类</option>
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <label for="L_category_id" class="layui-form-label">
                    链接
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="L_link" name="link" required="" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label for="L_describe" class="layui-form-label">
                    描述
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="L_describe" name="describe" required="" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item" id="url-box">
                <label class="layui-form-label">
                    内容
                </label>
                <div class="layui-input-inline">
                    <div id="editor"></div>
                    <textarea id="editortext" style="display: none;"></textarea>
                </div>
            </div>

            <div class="layui-form-item">
                <label for="L_sort" class="layui-form-label">
                    排序
                </label>
                <div class="layui-input-inline">
                    <input type="number" id="L_sort" name="sort" required="" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label for="L_on_shelf" class="layui-form-label">
                    状态
                </label>
                <div class="layui-input-inline">
                    <input type="checkbox" id="L_on_shelf" name="on_shelf" required="" lay-text="上架|下架" checked="" lay-skin="switch">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"></label>
                <button class="layui-btn" lay-filter="add" lay-submit="">增加</button>
            </div>
        </form>
    </div>
</div>
<script type="text/javascript">
    var editor;
    $(window).ready(function(){
        const E = window.wangEditor
        editor = new E('#editor')
        // 或者 const editor = new E( document.getElementById('div1') )
        editor.create();
        console.log(editor)
        editor.config.uploadFileName  = 'image';
        editor.config.uploadImgServer = '/back/upload/image';
        editor.config.uploadImgHooks  = {
            before: function (xhr, editor, files) {
                // 图片上传之前触发
                // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图片文件

                // 如果返回的结果是 @{prevent: true, msg: 'xxxx'} 则表示用户放弃上传
                // return {
                //     prevent: true,
                //     msg: '放弃上传'
                // }
            },
            success: function (xhr, editor, result) {
                // 图片上传并返回结果，图片插入成功之后触发
                // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
            },
            fail: function (xhr, editor, result) {
                // 图片上传并返回结果，但图片插入错误时触发
                // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
            },
            error: function (xhr, editor) {
                // 图片上传出错时触发
                // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
            },
            timeout: function (xhr, editor) {
                // 图片上传超时时触发
                // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
            },

            // 如果服务器端返回的不是 @{errno:0, data: [...]} 这种格式，可使用该配置
            // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
            customInsert: function (insertImg, result, editor) {
                // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
                // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果

                // 举例：假如上传图片成功后，服务器端返回的是 @{ url:'....' } 这种格式，即可这样插入图片：
                if(result.code == 200) {
                    insertImg(result.data.url);
                    // result 必须是一个 JSON 格式字符串！！！否则报错
                }else{
                    alert(result.message);
                }
            }
        }
        editor.txt.html($('#content').html());
    });
</script>
<script>
    layui.use(['form', 'layer','jquery'],
        function() {
            $ = layui.jquery;
            var form = layui.form,
                layer = layui.layer;

            //监听提交
            form.on('submit(add)',
                function(data) {
                    $('#editortext').val(editor.txt.text());
                    data.field.content = editor.txt.html();
                    let fromdata = new FormData();
                    let hasOnShelf = false;
                    for (let key in data.field) {
                        if(key == 'on_shelf'){
                            hasOnShelf = true;
                            fromdata.append(key, 1);
                        }else{
                            fromdata.append(key, data.field[key]);
                        }
                    }
                    if(!hasOnShelf)
                    {
                        fromdata.append('on_shelf', 0);
                    }
                    if(data.field.on_shelf)
                    {
                        data.field.on_shelf = 1;
                    }else{
                        data.field.on_shelf = 0;
                    }
                    axios.post('/back/article/addPost', data.field)
                        .then(function (response) {
                            if((response.data.code && response.data.code == 200) || (response.data.status && response.data.status == 200))
                            {
                                //发异步，把数据提交给php
                                layer.alert("增加成功", {icon: 6},
                                    function() {
                                        //关闭当前frame
                                        xadmin.close();
                                        // 可以对父窗口进行刷新
                                        xadmin.father_reload();
                                    });
                            }else
                            {
                                layer.msg(response.data.message);
                            }
                        })
                        .catch(function (error) {
                            layer.msg(error);
                        });
                    return false;
                });
        });
</script>
<script>

</script>
</body>

</html>